<!--  -->
<template>
<div id="app">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="success">默认按钮</el-button>
      <el-button type="warning">默认按钮</el-button>
      <el-button type="primary">默认按钮</el-button>
      <el-button type="danger">默认按钮</el-button>
      <el-button type="primary" disabled>默认按钮</el-button>
    </el-row>
</div>
  <!-- <div id="app">
    <div class="box">
      <div class="left"></div>
      <div class="mid"></div>
      <div class="right"></div>
    </div>
  </div> -->
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
#app {
  .box {
    display: flex;
    width: 100%;
    height: 100vh;
    background: skyblue;
    .left {
      flex: 1;
      background-color: wheat;
    }
    .mid {
      flex: 1;
    }
    .right {
      flex: 1;
    }
  }
}
</style>
